<template>
  <el-dialog width="750px" :title="dialogTitle" :visible.sync="dialogFormVisible">
    <el-form>
      <div style="display: flex;">
        <div style="margin-right: 40px;">
          <el-form-item label="班次名称：" :label-width="formLabelWidth">
            <el-select v-model="formData.sectionType" :size="formSize" class="el_input" placeholder="请选择">
              <el-option label="白班" value="1" />
              <el-option label="晚班" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="标段：" :label-width="formLabelWidth">
            <el-select
              v-model="formData.bidSection"
              :size="formSize"
              class="el_input"
              placeholder="请选择"
              @change="getWorkAreaList(null)">
              <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始签到：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.startsignin"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="签到结束：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.endsignin"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="早退计时：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.earlyofftime"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>
        </div>

        <div class="right">
          <span style="display: inline-block; width: 290px; height: 48px;"></span>
          <el-form-item label="所属工区：" :label-width="formLabelWidth">
            <el-select v-model="workAreaId" :size="formSize" class="el_input" multiple placeholder="请先选择标段">
              <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="上班时间：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.dutystarttime"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>

          <el-form-item label="下班时间：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.dutyendtime"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>

          <el-form-item label="签退结束：" :label-width="formLabelWidth">
            <el-time-picker
              class="el_input"
              :size="formSize"
              v-model="formData.signouttime"
              :picker-options="{selectableRange: '05:00:00 - 23:59:59'}"
              value-format="HH:mm:ss"
              placeholder="请选择时间" />
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HttpInterface from "../../util/httpInterface";
import { mapState, mapActions } from "vuex";

export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "84px",
      dialogTitle: "添加考勤",
      formSize: "medium",
      workAreaInfo: [],
      workAreaId: [],
      formData: {
        sectionType: "1",
        startsignin: "",
        endsignin: "",
        earlyofftime: "",
        dutystarttime: "",
        dutyendtime: "",
        signouttime: "",
        bidSection: "",
      },
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    getWorkAreaList(id) {
      let _this = this;
      if (!id) this.workAreaId = [];
      this.selectByBidSection({
        bidSection: this.formData.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    getCheckInfo (id) {
      let _this = this;
      var parmas = { id };
      HttpInterface.requestPost(this, HttpInterface.URL_DUTYSECTION_GET_SECTION, parmas, function (res) {
        var { other } = res.data;
        _this.formData = other;
        let arr = [];
        if (other.workAreaList) {
          other.workAreaList.forEach(item => {
            arr.push(item.id)
          })
        }
        _this.workAreaId = arr;
        _this.getWorkAreaList(other.sectionid);
      }, null, true)
    },

    verifyFormInfo() {
      let { formData, workAreaId } = this;
      if (!formData.bidSection) {
        this.warningMessage("请选择标段");
        return false;
      }
      if (workAreaId.length == 0) {
        this.warningMessage("请选择所属工区");
        return false;
      }
      if (!formData.startsignin) {
        this.warningMessage("请选择开始签到时间");
        return false;
      }
      if (!formData.endsignin) {
        this.warningMessage("请选择签到结束时间");
        return false;
      }
      if (!formData.earlyofftime) {
        this.warningMessage("请选择早退计时时间");
        return false;
      }
      if (!formData.dutystarttime) {
        this.warningMessage("请选择上班时间");
        return false;
      }
      if (!formData.dutyendtime) {
        this.warningMessage("请选择下班时间");
        return false;
      }
      if (!formData.signouttime) {
        this.warningMessage("请选择签退结束时间");
        return false;
      }
      return true;
    },

    submitFormInfo() {
      if (!this.verifyFormInfo()) return;
      let _this = this;
      let arr = [];
      let { id, workAreaId, workAreaInfo } = this;
      var parmas = this.formData;
      workAreaId.forEach(item => {
        workAreaInfo.forEach(key => {
          if (item == key.id) arr.push({ id: key.id, name: key.name });
        })
      })
      parmas.workAreaList = arr;
      let url = id ? HttpInterface.URL_DUTYSECTION_EDIT : HttpInterface.URL_DUTYSECTION_ADD;
      HttpInterface.requestPost(this, url, parmas, function (res) {
        var { success, msg } = res.data;
        if (success) {
          _this.dialogFormVisible = false;
          _this.$parent.refreshListData();
          _this.$message.success("修改成功");
        } else {
          _this.errorMessage(msg)
        }
      }, null, false)
    },

    show(id) {
      this.dialogFormVisible = true;
      this.formData = {
        sectionType: "1",
        startsignin: "",
        endsignin: "",
        earlyofftime: "",
        dutystarttime: "",
        dutyendtime: "",
        signouttime: "",
        bidSection: "",
      };
      this.id = "";
      this.workAreaId = [];
      if (id != undefined) {
        this.id = id;
        this.getCheckInfo(id);
        this.dialogTitle = "编辑考勤";
      } else {
        this.dialogTitle = "添加考勤";
      }
    }
  }
};
</script>

<style  scoped>
.el_input {
  width: 190px;
}

.el-dialog__wrapper >>> .el-dialog__body .el-form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
